<template>
  <div>
    <div class="header">
        <div class="logo">
          <!-- <img src="../assets/tq1.png" alt="" class="tq1" /> -->
        </div>
        <div class="r">
          <div class="r1" @click="home">{{ $t('首页') }}</div>
          <div class="r1" @click="wj" v-if="$store.state.userInfoK.uid!=''">{{ $t('问卷') }}</div>
          <div class="r1" @click="zy">{{ $t('中文/English') }}</div>
          <!-- <div class="r1">{{ $t('关于我们') }}</div> -->
          <!-- <div class="r1">{{ $t('质量保证') }}</div> -->
          <!-- <div class="r1">{{ $t('服务') }}</div> -->
          <div v-if="$store.state.userInfoK.uid!=''" class="r1"  @click="goToProfile">{{ $store.state.userInfoK.nick_name }}</div>
          <div v-else class="r1" @click="login" style="cursor: pointer;">{{ $t('登录') }}</div>
        </div>
      </div>
  <div class="homepage">
    <div class="homepage_h">
      <div class="homepage_h_l">
        <div class="homepage_h_l_t1">
          <div class="homepage_h_l_t1_t1">
            <div class="homepage_h_l_t1_t1_t1">{{ $t('研究调查') }}</div>
            <div class="homepage_h_l_t1_t1_t2">
              {{ $t('通过参加这项研究调查获得积分！') }}
            </div>
            <div class="homepage_h_l_t1_t1_t3">
              <div class="homepage_h_l_t1_t1_t3_t1">{{ $t('立即开始') }}</div>
              <div class="homepage_h_l_t1_t1_t3_t2">
                <img src="../assets/组 7 拷贝@3x.png" alt="" />
              </div>
            </div>
          </div>
          <div class="homepage_h_l_t1_t1 homepage_h_l_t1_t2">
            <div class="homepage_h_l_t1_t1_t1">{{ $t('建立您的个人资料') }}</div>
            <div class="homepage_h_l_t1_t1_t2">
              {{ $t('告诉我们你的态度、信仰和兴趣，以获得更多的调查') }}
            </div>
            <div class="homepage_h_l_t1_t1_t3">
              <div class="homepage_h_l_t1_t1_t3_t1">{{ $t('立即开始') }}</div>
              <div class="homepage_h_l_t1_t1_t3_t2">
                <img src="../assets/组 7 拷贝@3x.png" alt="" />
              </div>
            </div>
          </div>
        </div>
        <div class="homepage_h_l_t2">
          <div class="homepage_h_l_t2_item" v-for="(item,index) in list" :key="index" @click="choice(item.id)">
            <img src="../assets/k1.png" alt="" class="homepage_h_l_t2_item_img" />
            <div class="homepage_h_l_t2_item_t">
              <div class="item_top">
                <img src="../assets/图层 5@3x.png" alt="" class="item_top_img" />
                {{ $t('新') }}
              </div>
              <div class="item_center">{{ item.title }}</div>
              <div class="item_bottom">
                {{ item.contents }}
              </div>
            </div>
          </div>
          <!-- <div class="homepage_h_l_t2_item">
            <img src="../assets/k2.png" alt="" class="homepage_h_l_t2_item_img" />
            <div class="homepage_h_l_t2_item_t">
              <div class="item_top">
                <img src="../assets/dada.png" alt="" class="item_top_img" />
                {{ $t('流行的') }}
              </div>
              <div class="item_center">{{ $t('您的日常调查') }}</div>
              <div class="item_bottom">
                {{ $t('分享您的意见，立即获得奖励！首先，回答一些个人问题，以更好地匹配调查。每天回来表达你对新调查的看法，并获得更多奖励。') }}
              </div>
            </div>
          </div>
          <div class="homepage_h_l_t2_item">
            <img src="../assets/k3.png" alt="" class="homepage_h_l_t2_item_img" />
            <div class="homepage_h_l_t2_item_t">
              <div class="item_top">
                <img src="../assets/dada.png" alt="" class="item_top_img" />
                {{ $t('新') }}
              </div>
              <div class="item_center">{{ $t('Dynata每日调查') }}</div>
              <div class="item_bottom">
                {{ $t('分享您的意见，立即获得奖励！首先，回答一些个人问题，以更好地匹配调查。每天回来表达你对新调查的看法，并获得更多奖励。') }}
              </div>
            </div>
          </div>
          <div class="homepage_h_l_t2_item">
            <img src="../assets/k4.png" alt="" class="homepage_h_l_t2_item_img" />
            <div class="homepage_h_l_t2_item_t">
              <div class="item_top">
                <img src="../assets/图层 5@3x.png" alt="" class="item_top_img" />
                {{ $t('新') }}
              </div>
              <div class="item_center">{{ $t('喜欢我们的Facebook页面') }}</div>
              <div class="item_bottom">
                {{ $t('喜欢我们的脸书页面！喜欢我们的脸书页面！关注我们的页面以获取独家促销代码。') }}
              </div>
            </div>
          </div>
          <div class="homepage_h_l_t2_item">
            <img src="../assets/k5.png" alt="" class="homepage_h_l_t2_item_img" />
            <div class="homepage_h_l_t2_item_t">
              <div class="item_top">
                <img src="../assets/图层 5@3x.png" alt="" class="item_top_img" />
                {{ $t('新') }}
              </div>
              <div class="item_center">{{ $t('SaySo奖励') }}</div>
              <div class="item_bottom">
                {{ $t('点击此处访问SaySo Rewards市场研究保险公司！') }}
              </div>
            </div>
          </div>
          <div class="homepage_h_l_t2_item">
            <img src="../assets/k6.png" alt="" class="homepage_h_l_t2_item_img" />
            <div class="homepage_h_l_t2_item_t">
              <div class="item_top">
                <img src="../assets/图层 5@3x.png" alt="" class="item_top_img" />
                {{ $t('新') }}
              </div>
              <div class="item_center">{{ $t('Samplicio.us调查') }}</div>
              <div class="item_bottom">
                {{ $t('访问Samplicio.us市场研究调查。点击这里！') }}
              </div>
            </div>
          </div>
          <div class="homepage_h_l_t2_item">
            <img src="../assets/k7.png" alt="" class="homepage_h_l_t2_item_img" />
            <div class="homepage_h_l_t2_item_t">
              <div class="item_top">
                <img src="../assets/图层 5@3x.png" alt="" class="item_top_img" />
                {{ $t('新') }}
              </div>
              <div class="item_center">{{ $t('PureSpectrum调查') }}</div>
              <div class="item_bottom">
                {{ $t('访问PureSpectrum Surveys市场研究保险公司点击此处！') }}
              </div>
            </div>
          </div>
          <div class="homepage_h_l_t2_item">
            <img src="../assets/k8.png" alt="" class="homepage_h_l_t2_item_img" />
            <div class="homepage_h_l_t2_item_t">
              <div class="item_top">
                <img src="../assets/图层 5@3x.png" alt="" class="item_top_img" />
                {{ $t('新') }}
              </div>
              <div class="item_center">{{ $t('您的日常调查') }}</div>
              <div class="item_bottom">
                  {{ $t('享您的意见，立即获得奖励！首先，回答一些个人问题，以更好地匹配调查。每天回来表达你对新调查的看法，并获得更多奖励。') }}
              </div>
            </div>
          </div> -->
        </div>
        <div class="homepage_h_l_t3">
          <div class="homepage_h_l_t3_top">{{ $t('更多调查') }}</div>
          <div class="homepage_h_l_t3_bottom">
            <div class="homepage_h_l_t3_bottom_img">
              <img src="../assets/组 25 拷贝@3x.png" alt="" />
            </div>
            <div class="homepage_h_l_t3_bottom_t">
              <div class="homepage_h_l_t3_bottom_t_t1">
                {{ $t('完成分析器后解锁更多调查') }}
              </div>
              <div class="homepage_h_l_t3_bottom_t_t2">{{ $t('完成分析器后解锁更多调查') }}</div>
            </div>
          </div>
        </div>
        <div class="homepage_h_l_t4">
          <img src="../assets/687d73fd378b8a20fc060a1a6b82dc1c.png" alt="" />
        </div>
        <div class="homepage_h_l_t5">
          <div class="homepage_h_l_t5_title">{{ $t('调查合作伙伴') }}</div>
          <div class="homepage_h_l_t5_content">
            <div class="homepage_h_l_t5_content_item">
              <div class="img22">
                <div class="img"><img src="../assets/图层 25@3x.png" alt="" /></div>
                <div class="text">{{ $t('Samhplicious') }}</div>
              </div>
            </div>
            <div class="homepage_h_l_t5_content_item">
              <div class="img22">
                <div class="img"><img src="../assets/图层 26@3x.png" alt="" /></div>
                <div class="text">{{ $t('Daily Surveys') }}</div>
              </div>
            </div>
            <div class="homepage_h_l_t5_content_item">
              <div class="img22">
                <div class="img"><img src="../assets/d55344b2b32c3bedbb0fbff6d83d401985559c793a5e-YEo618@3x.png"
                    alt="" /></div>
                <div class="text">{{ $t('Cherries') }}</div>
              </div>
            </div>
            <div class="homepage_h_l_t5_content_item">
              <div class="img22">
                <div class="img"><img src="../assets/图层 27@3x.png" alt="" /></div>
                <div class="text">{{ $t('inBrain') }}</div>
              </div>
            </div>
            <div class="homepage_h_l_t5_content_item">
              <div class="img22">
                <div class="img"><img src="../assets/0f96548a2c0395a74610d16527b38ca0cd5571f95af6-iEd8cj@3x.png"
                    alt="" /></div>
                <div class="text">{{ $t('Spectrum') }}</div>
              </div>
            </div>
            <div class="homepage_h_l_t5_content_item">
              <div class="img22">
                <div class="img img2"><img src="../assets/组 27 拷贝@3x.png" alt="" /></div>
                <div class="text">{{ $t('SaySoRewards') }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="homepage_h_l_t4">
          <img src="../assets/8571ee84-a122-4e27-87d0-b31f9d3ab327.png" alt="" />
        </div>
      </div>
      <div class="homepage_h_r">
        <div class="r1">
          <div>{{ $t('跟随') }}</div>
          <div class="r1_img">
            <img src="../assets/组 9 拷贝@3x.png" alt="">
            <img src="../assets/组 11 拷贝@3x.png" alt="">
            <img src="../assets/组 12 拷贝@3x.png" alt="">
            <img src="../assets/组 33 拷贝@3x.png" alt="">
          </div>
        </div>
        <div class="r2">
          <img src="../assets/c9675194-835a-4cb5-81ad-d2315372186e.png" alt="">
        </div>
        <div class="r3">
          <div class="r3_t1">
            <div class="r3_t1_t1">
              <div>{{ $t('最新抽奖') }}</div>
              <div class="r3_t1_t1_t2">Eenter <img class="r3_t1_t1_t2_img" src="../assets/图层 3 拷贝 3@3x.png" alt="">
              </div>
            </div>
            <div class="r3_t1_t2">
              <img src="../assets/组 35 拷贝@3x.png" alt="">
              <div class="r3_t1_t2_t1">
                <div>$ 50</div>
                <div>{{ $t('亚马逊礼品卡*') }}</div>
              </div>
            </div>
            <div class="r3_t1_t3">{{ $t('本次抽奖结束时间：7日20:59.59') }}</div>
          </div>
          <div class="r3_t1">
            <div class="r3_t1_t1">
              <div>{{ $t('最新抽奖') }}</div>
              <div class="r3_t1_t1_t2">{{ $t('更改目标') }} <img class="r3_t1_t1_t2_img" src="../assets/图层 3 拷贝 3@3x.png" alt="">
              </div>
            </div>
            <div class="r3_t1_t2">
              <img src="../assets/组 13 拷贝@3x.png" alt="">
              <div class="r3_t1_t2_t1">
                <div>$ 10 USD {{ $t('Paypal') }}</div>
                <div>{{ $t('金钱') }}</div>
              </div>
            </div>
            <div class="r3_t1_t3">{{ $t('本次抽奖结束时间：7日20:59.59') }}</div>
          </div>
          <div class="r3_t1">
            <div class="r3_t1_t1">
              <div>{{ $t('最新抽奖') }}</div>
              <div class="r3_t1_t1_t2">{{ $t('更改目标') }} <img class="r3_t1_t1_t2_img" src="../assets/图层 3 拷贝 3@3x.png" alt="">
              </div>
            </div>
            <div class="r3_t1_t31">{{ $t('你想怎么赚钱每天额外获得100-500分？在下面提供您的推荐链接。') }}
            </div>
            <input type="text" class="r3_t1_t32_input">
            <div class="r3_t1_t32_btn">
              <img src="../assets/30bb8a24f14e9b465c07d5129e9fae003091278b37c2-sU42g5@3x.png" alt="">
              <div>{{ $t('复制链接') }}</div>
            </div>
            <div class="r3_t1_t33">{{ $t('点击下面的邀请！') }}</div>
            <div class="r3_t1_t34">
              <img src="../assets/图层 11@3x.png" alt="">
              <img src="../assets/组 14 拷贝@3x.png" alt="">
              <img src="../assets/图层 10@3x.png" alt="">
              <img src="../assets/组 15 拷贝@3x.png" alt="">
              <img src="../assets/图层 12@3x.png" alt="">
              <img src="../assets/组 34 拷贝@3x.png" alt="">
              <img src="../assets/图层 13@3x.png" alt="">
            </div>
            <div class="r3_t1_t35">
              {{ $t('通过参与我们的推荐计划，您同意以下内容') }}
              <span class="r3_t1_t35_span">{{ $t('条款。') }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="homepage_c"></div>
  </div>
  </div>
</template>

<script setup>
import { computed,ref } from 'vue';
import { useStore } from 'vuex';
import { wjsurveys } from "../api/index";
import router from '../router';
import { useI18n } from "vue-i18n"
const i18n = useI18n()
// Static component — replace with real data later
const list = ref([])
wjsurveys().then(res=>{
  list.value = res.data
})
const choice = (id)=>{
  router.push({
    path:'/choice',
    query:{
      id
    }
  })
}
const Store = useStore();
const currentLanguage = computed(() => Store.getters.currentLanguage);

const getCurrentText = (zh, en) => currentLanguage.value === 'zh' ? zh : en;
const home = ()=>{
  router.push('/home')
}
const wj = ()=>{
  router.push('/homepage')
}
const zy = ()=>{
  // i18n.locale.value
  if(i18n.locale.value==='zh'){
    i18n.locale.value = 'en'
    cookie.set('localLang', 'en')
    location.reload()
  }else{
    i18n.locale.value = 'zh'
    cookie.set('localLang', 'zh')
    location.reload()
  }
}
const login = () => {
  router.push('/login')
}
const goToProfile = () => {
  router.push('user')
}
</script>

<style lang="scss" scoped>
.header {
      padding: 30px 100px;
      margin-bottom: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgb(#409EFF,.8);
      color: #fff;
      .logo {
        width: 163px;
        height: 67px;
        img {
          width: 100%;
        }
      }
      .r {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .r1 {
          font-family: Arial, Arial;
          font-weight: normal;
          font-size: 25px;
          margin: 0 31px;
          text-align: center;
          font-style: normal;
          text-transform: none;
        }
      }
    }
.homepage {
  .homepage_h {
    padding: 41px 112px 20px 112px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .homepage_h_l {
      width: 75%;

      .homepage_h_l_t1 {
        display: flex;
        justify-content: space-between;

        .homepage_h_l_t1_t1 {
          width: 48%;
          height: 344px;
          background-image: url("../assets/asda1.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          padding: 61px 46px 39px 71px;
          box-sizing: border-box;

          .homepage_h_l_t1_t1_t1 {
            font-family: MicrosoftSansSerif;
            font-size: 30px;
            color: #ffffff;
          }

          .homepage_h_l_t1_t1_t2 {
            font-family: MicrosoftSansSerif;
            font-size: 25px;
            color: #ffffff;
            margin-top: 13px;
          }

          .homepage_h_l_t1_t1_t3 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 43px;

            .homepage_h_l_t1_t1_t3_t1 {
              width: 221px;
              height: 60px;
              border-radius: 30px 30px 30px 30px;
              border: 2px solid #ffffff;
              display: flex;
              justify-content: center;
              align-items: center;
              font-family: MicrosoftSansSerif;
              font-size: 32px;
              color: #ffffff;
            }

            .homepage_h_l_t1_t1_t3_t2 {
              width: 51px;
              height: 30px;

              img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }

        .homepage_h_l_t1_t2 {
          background-image: url("../assets/asda2.png");
        }
      }

      .homepage_h_l_t2 {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 50px;

        .homepage_h_l_t2_item {
          width: 48%;
          display: flex;
          align-items: center;
          margin-bottom: 23px;

          .homepage_h_l_t2_item_img {
            width: 275px;
            height: 282px;
          }

          .homepage_h_l_t2_item_t {
            width: 287px;
            height: 219px;
            background: #ffffff;
            box-shadow: 0px 0px 1px 0px #000000;
            border-radius: 0 10px 10px 0px;
            padding: 15px;

            .item_top {
              display: flex;
              align-items: center;
              font-family: MicrosoftSansSerif;
              font-size: 18px;
              color: #0076df;

              .item_top_img {
                width: 22px;
                height: 19px;
                margin-right: 5px;
              }
            }

            .item_center {
              font-family: MicrosoftSansSerif;
              font-size: 16px;
              color: #000000;
              margin-top: 10px;
            }

            .item_bottom {
              font-family: MicrosoftSansSerif;
              font-size: 14px;
              color: #535353;
              margin-top: 10px;
            }

            .item_bottom_2 {
              display: flex;
              align-items: center;
              font-family: MicrosoftSansSerif;
              font-size: 14px;
              color: #535353;
              margin-top: 10px;

              .item_top_img {
                width: 22px;
                height: 19px;
                margin-right: 5px;
              }
            }
          }
        }
      }

      .homepage_h_l_t3 {
        margin-top: 50px;

        .homepage_h_l_t3_top {
          font-family: Arial, Arial;
          font-weight: normal;
          font-size: 28px;
          color: #000000;
        }

        .homepage_h_l_t3_bottom {
          display: flex;
          align-items: center;

          .homepage_h_l_t3_bottom_img {
            width: 64px;
            height: 64px;
            margin-right: 32px;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .homepage_h_l_t3_bottom_t {
            font-family: Arial, Arial;
            font-weight: normal;
            font-size: 17px;
            color: #000000;
            margin-top: 25px;
          }

          .homepage_h_l_t3_bottom_t_t2 {
            height: 38px;
            background: #0075df;
            border-radius: 19px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 13px;
            color: #ffffff;
            margin-top: 20px;
          }
        }
      }

      .homepage_h_l_t4 {
        width: 100%;
        height: 225px;
        margin-top: 77px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .homepage_h_l_t5 {
        margin-top: 60px;

        .homepage_h_l_t5_title {
          font-family: Arial, Arial;
          font-weight: normal;
          font-size: 28px;
          color: #000000;
        }

        .homepage_h_l_t5_content {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          margin-top: 20px;
          text-align: center;

          .homepage_h_l_t5_content_item {
            width: 30%;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 130px;
            background: #ffffff;
            border-radius: 10px 10px 10px 10px;
            box-shadow: 0px 0px 1px 0px #000000;
            margin-bottom: 20px;

            .img {
              width: 38px;
              height: 38px;
              margin: 0 auto;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .img2 {
              width: 50px;
            }

            .text {
              font-size: 17px;
              color: #303030;
              margin-top: 15px;
            }
          }
        }
      }
    }

    .homepage_h_r {
      width: 20%;

      .r1 {
        display: flex;
        justify-content: space-between;
        font-family: MicrosoftSansSerif;
        font-size: 18px;
        color: #000000;
      }

      .r1_img {
        img {
          width: 31px;
          height: 31px;
          margin-left: 10px;
        }
      }

      .r2 {
        width: 100%;
        height: 150px;
        margin-top: 20px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .r3 {
        .r3_t1 {
          padding: 10px 20px;
          box-sizing: border-box;
          background: #FFFFFF;
          border-radius: 10px 10px 10px 10px;
          border: 1px solid #0076DF;
          margin: 20px 0;

          .r3_t1_t1 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-family: MicrosoftSansSerif;
            font-size: 15px;
            color: #000000;

            .r3_t1_t1_t2 {
              color: #0076DF;

              .r3_t1_t1_t2_img {
                width: 5px;
                height: 10px;
              }
            }
          }

          .r3_t1_t2 {
            display: flex;
            align-items: center;
            font-family: MicrosoftSansSerif;
            font-size: 15px;
            color: #000000;
            margin-top: 15px;

            img {
              width: 93px;
              height: 61px;
            }

            .r3_t1_t2_t1 {
              margin-left: 10px;
            }
          }

          .r3_t1_t3 {
            margin-top: 15px;
            font-family: MicrosoftSansSerif;
            font-size: 15px;
            color: #7C7C7C;
          }

          .r3_t1_t31 {
            font-family: MicrosoftSansSerif;
            font-size: 13px;
            color: #626262;
            margin-top: 15px;
          }

          .r3_t1_t32_input {
            width: 100%;
            height: 40px;
            background: #FFFFFF;
            border-radius: 10px 10px 10px 10px;
            border: 1px solid #0076DF;
            margin-top: 15px;
            padding: 0 10px;
          }

          .r3_t1_t32_btn {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 15px;
            font-size: 13px;
            color: #0075DF;

            img {
              width: 13px;
              height: 13px;
              margin-right: 5px;
            }
          }

          .r3_t1_t33 {
            margin-top: 15px;
            font-family: MicrosoftSansSerif;
            font-size: 13px;
            color: #616161;
            text-align: center;
          }

          .r3_t1_t34 {
            display: flex;
            justify-content: space-between;
            padding: 0 10px;
            margin-top: 15px;
            box-sizing: border-box;

            img {
              width: 24px;
              height: 24px;
            }
          }

          .r3_t1_t35 {
            font-family: MicrosoftSansSerif;
            font-size: 12px;
            color: #616161;
            margin-top: 15px;
            .r3_t1_t35_span{
              color: #0075DF;
              text-align: center;
            }
          }
        }
      }
    }
  }
}
</style>